<template>
    <div class="adddata">
        <!-- 秒杀时间列表 -->
        <div class="title">
            <el-icon>
                <Tickets />
            </el-icon>
            <h3>数据列表</h3>
        </div>
        <div>
            <el-button @click="addActivity">添加</el-button>
        </div>
    </div>
    <div class="tables">
        <!-- 数据的展示 -->
        <el-table align="center" :data="tableData" style="width: 100%;" border>
            <el-table-column align="center" prop="id" label="编号" width="100" />
            <el-table-column align="center" prop="name" label="秒杀时间段名称" width="333" />
            <el-table-column align="center" label="每日开始时间" width="333">
                <template #default="scope">
                    <div>
                        {{ scope.row.startTime ? dayjs(scope.row.startTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="每日结束时间" width="333">
                <template #default="scope">
                    <div>
                        {{ scope.row.endTime ? dayjs(scope.row.endTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="启用" width="333">
                <template #default="scope">
                    <el-switch @change="changeStatus(scope.row)" :value="scope.row.status === 1 ? true : false" />
                </template>
            </el-table-column>
            <el-table-column align="center" prop="address" label="操作">
                <template #default="scope">
                    <div>
                        <el-button @click="onEdit(scope.row)">编辑</el-button>
                        <el-button @click="deleteSessionFn(scope.row.id)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <flashSessionEdie :visible="visible" :form="modalForm" @cancel="onCloseDialog" @confirm="onConfirmDialog">
    </flashSessionEdie>
</template>

<script setup lang="ts">
import { Search, Tickets } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import type { Ref } from 'vue'
import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
import * as api from '../../request/api'
import dayjs from 'dayjs'
import type { IFlashSessionListItem, } from '../../request/SmsAdminConreiller/index'
// 引入秒杀时间段列表弹出框
import flashSessionEdie from './components/flashSessionEdie.vue'

// 弹出框状态
const visible = ref(false)
// false编辑 true 新增
let add = false;
let modalForm = ref({}) as Ref<IFlashSessionListItem>
let tableData: Ref<any> = ref([])

// 秒杀时间段是否启用
let changeStatus = (row: any) => {
    // console.log(row);
    ElMessageBox.confirm(
        '是否要修改该状态?', "提示",
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let query = reactive({
                id: row.id,
                status: row.status == 1 ? 0 : 1
            })
            // console.log(query1);

            let newQuery = JSON.parse(JSON.stringify(query))
            await api.flash.updateFlashSessionStatus(newQuery)
            ElMessage({
                type: 'success',
                message: '修改成功',
            })
            flashSessionFn()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消修改',
            })
        })
}

// 添加时间
let addActivity = () => {
    let newUser = {
        createTime: '',
        endTime: '',
        id: 0,
        name: '',
        startTime: '',
        status: 1,
    } as IFlashSessionListItem;
    modalForm.value = newUser;
    add = true;
    visible.value = true
}
// 编辑按钮
let onEdit = (row: IFlashSessionListItem) => {
    add = false;
    modalForm.value = row
    visible.value = true
}
// 删除场次
let deleteSessionFn = (id: number) => {
    // 二次 确认 
    ElMessageBox.confirm(
        '是否要删除该时间段!', "提示",
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            // 发请求删除
            await api.flash.deleteSession(id)
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            flashSessionFn()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
// 确认了输入框的内容之后
// 需要发送请求
let onConfirmDialog = (row: IFlashSessionListItem) => {
    // console.log(row);  // row就是表单数据
    // 二次 确认 
    ElMessageBox.confirm(
        '是否确认提交!', "提示",
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            // 发请求
            // 去判断 是 编辑 还是添加
            if (add) {
                await api.flash.createFlashSession(row)  // 新增
            } else {
                await api.flash.updateFlashSession(row) // 编辑
            }
            ElMessage({
                type: 'success',
                message: '操作成功',
            })
            flashSessionFn()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消提交',
            })
        })
}

// 子级emit组件传过来的事件
let onCloseDialog = () => {
    visible.value = false
}
// 请求秒杀时间段列表数据
let flashSessionFn = async () => {
    let flashSessionItem = await api.flash.getFlashSessionList()
    // console.log(flashSessionItem);
    tableData.value = flashSessionItem
    // console.log(tableData);
    return tableData
}
flashSessionFn()




</script>

<style scoped lang="scss">
.adddata {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #ebeef5;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    margin-top: 60px;
    margin-bottom: 20px;
}

.title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .ei {
        display: flex;
        align-items: center;

        h3 {
            color: #303133;
            font-size: 14px;
            margin-left: 10px;
        }
    }

    h3 {
        color: #303133;
        font-size: 14px;
        margin-left: 10px;
    }
}

.tables {
    .pagination {
        margin: 20px 0;
        padding-right: 20px;
        float: right;
    }

    span {
        color: #409eff;
    }

    .bianji {
        margin: 0 5px;
    }

    .users {
        color: #409eff;
        font-size: 12px;

        &:hover {
            color: rgba(64, 158, 255, 0.7);
            cursor: pointer;
        }
    }
}
</style>